import React from 'react';

import { TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen from './app/screens/HomeScreen';
import ForumScreen from './app/screens/ForumScreen';
import AccountScreen from './app/screens/AccountScreen';

const RootTabs = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'home' : 'home-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Forum: {
    screen: ForumScreen,
    navigationOptions: {
      tabBarLabel: 'Forum',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'forum' : 'forum-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Account: {
    screen: AccountScreen,
    navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={focused ? 'account' : 'account-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
});

export default RootTabs;
